<template>
  <base-breadcrumb :breadcrumb="!query" :title="$route.meta.title">
    <!-- 技术、安全检查和整改信息详情 -->
    <a-spin
      :spinning="loading"
      style="margin-bottom: 40px"
    >
      <a-card :bordered="false">
        <title-name title="基本信息"></title-name>
         <a-row>
          <a-col :span="12">
            <div style="padding-left: 30px"> 受检单位：<span>{{ projectInfo.inspectedUnit || ''}}</span>
        </div>
          </a-col>
         <a-col :span="12">
           检查类别：{{projectInfo.checkType || ''}}
         </a-col>
         </a-row>
      </a-card>
      <!-- 问题信息 -->
      <a-card
        class="mb12"
      >
        <title-name title="技术问题信息" />
        <a-row>
          <!-- 左边表单 -->
          <a-col :span="6">
            <custom-form
              :form-list="problemListCombine"
              :form="projectInfo"
              edit-model="V"
            ></custom-form>
          </a-col>
          <!-- 右边边表单 -->
          <a-col :span="18">
            <custom-form
                    :form-list="problemListCombine2"
                    :form="projectInfo"
                    edit-model="V"
            ></custom-form>
          </a-col>
        </a-row>
      </a-card>
      <!-- 整改结果 -->
      <a-card>
        <title-name title="技术整改信息"></title-name>
        <!-- 整改基础信息 -->
        <custom-form
            :form-list="rectification"
            :form="projectInfo"
            edit-model="V"
        ></custom-form>
        <!-- 整改结果列表 -->
        <a-card v-for="(item) in projectInfo.rectifyResults" :key="item.id" class="mb12">
            <custom-form
              ref="problemRectification"
              :form-list="problemRectificationList"
              :form="item"
              edit-model="V"
              :key="item.id"
            />
        </a-card>
      </a-card>
      <a-card v-if="!$route.query.t">
        <UploadTableNew  :useAdd="false"
                         :useDelete="false"
                         :useExport="false"
                         ref="uploadTable"
                         :init-file-list="projectInfo.dataFile"/>
      </a-card>
    </a-spin>
    <!-- 页脚操作栏 -->
    <div
      class="btn_box page-btn-right-top">
      <a-button
        @click="$router.back()"
      >
        关闭
      </a-button>
    </div>
         <!-- 打点图 -->
      <PreView
        :isDownload="false"
        :pointer.sync="checkCoordinate"
        :preview-image="problemInfo.checkAreaImages || []"
        :visible.sync="previewVisible"
      />
  </base-breadcrumb>
</template>

<script>
import Selector from '@/components/Select/Selector'
import BasePrintButton from '@/components/BasePrintButton' // 打印按钮
import Vue from 'vue'
import BaseEditPage from '@/views/baseEditPage' // 编辑详情页基础配置
import PreView from '@/components/PreView' // 检查问题具体位置（打点）
import { problemAppDetail } from "@/api/technology"
import moment from 'moment'
const statusList = [
  {
    name: '所有',
    id: 0
  },
  {
    name: '待整改',
    id: 1
  },
  {
    name: '整改中',
    id: 2
  },
  {
    name: '待复查',
    id: 3
  },
  {
    name: '复查通过',
    id: 4
  },
  {
    name: '不合格不整改',
    id: 5
  },
  {
    name: '超时整改',
    id: 6
  }
]
export default {
    extends: new BaseEditPage(),
    components: {
        Selector,
        BasePrintButton,
        PreView
    },
    computed: {
      //坐标点
      checkCoordinate(){
        let checkCoordinate = this.problemInfo?.checkCoordinate?.replace(/;/g,",") || null,checkCoordinateArr = [],str = [];
        if(checkCoordinate){
             checkCoordinateArr = checkCoordinate.split(',');
             str = [];
             for (let index = 0; index < checkCoordinateArr?.length / 2; index++) {
                str.push({
                  x: checkCoordinateArr[index],
                  y: checkCoordinateArr[index + 1]
                });
                // index++;
            } 
        }
        return str;
      },
        // 检查信息表单列表
        checkListSafe() {
            return [
                {
                    keyName: 'checkNumber',
                    label: this.checkType == 1 ? '安全检查编号' : '技术检查编号',
                },
                {
                    keyName: 'subProject',
                    hidden: this.checkType == 1,
                    label: '分项工程'
                },
                {
                    keyName: 'checkResultName',
                    label: '检查结果'
                },
                {
                    keyName: 'checkPeople',
                    label: '检查人'
                },
                {
                    keyName: 'checkTime',
                    label: '检查时间'
                },
                {
                    keyName: 'checkTypeName',
                    label: '检查类型'
                },
                {
                    keyName: 'checkAreaName',
                    label: '检查区域',
                    span: 24
                },
                {
                    keyName: 'dutyName',
                    hidden: !this.checkInfo.dutyName,
                    label: '责任人'
                },
                {
                    keyName: 'rectificationUnit',
                    hidden: !this.checkInfo.rectificationUnit,
                    label: '整改单位'
                },
                {
                    keyName: 'fileArrays',
                    slot: true,
                    label: '现场照片',
                    span: 24
                },
                {
                    keyName: 'checkRecords',
                    hidden: !this.checkInfo.checkRecords,
                    label: '检查记录',
                    span: 24
                }
            ]
        },
        checkListQuality() {
            return [
              // 左侧表单
              [
                {
                    keyName: 'checkNumber',
                    hidden: this.manageType == 1,
                    label: this.checkType == 1 ? '安全检查编号' : '技术检查编号',
                    span: 24
                },
                {
                    keyName: 'subProject',
                    hidden: this.checkType == 1,
                    label: '分项工程',
                    span: 24
                },
                {
                    keyName: 'checkResultName',
                    hidden: this.manageType == 1,
                    label: '检查结果',
                    span: 24
                },
                {
                    keyName: 'checkTypeName',
                    hidden: this.manageType == 1,
                    label: '检查类型',
                    span: 24
                },
                {
                    keyName: 'checkAreaName',
                    label: '检查区域',
                    span: 24
                },
                {
                    keyName: 'dutyName',
                    hidden: !this.checkInfo.dutyName,
                    label: '责任人',
                    span: 24
                },
                {
                    keyName: 'rectificationUnit',
                    hidden: !this.checkInfo.rectificationUnit || this.manageType == 1,
                    label: '整改单位',
                    span: 24
                },

                {
                    keyName: 'checkRecords',
                    hidden: !this.checkInfo.checkRecords,
                    label: '检查记录',
                    span: 24
                }
              ],
              // 右侧表单
              [
                {
                    keyName: 'checkPeople',
                    label: '检查人',
                    span: 12
                },
                {
                    keyName: 'checkTime',
                    label: '检查时间',
                    span: 12
                },
                {
                    keyName: 'fileArrays',
                    type: 'uploadFile',
                    label: '现场照片',
                    span: 24,
                    businessCode: this.manageType == 1 ? 'SHE01' : 'QM01',
                    attrs: {
                      disabled: this.editModel == 0 || this.manageType == 1,
                      uploadType: 'image',
                      editModel: this.editModel,
                      multiple: true
                    }
                },
              ]
            ]
        },
        // 问题信息表单列表
        problemList() {
            return [
                {
                    keyName: 'rectificationPeople',
                    label: '整改人'
                },
                {
                    keyName: 'inspectedUnit',
                    label: '整改单位'
                },
                {
                    keyName: 'reviewer',
                    label: '复查人'
                },
                {
                    keyName: 'rectificationPeriod',
                    label: '整改期限'
                },
                // {
                //     keyName: 'problemType',
                //     hidden: this.checkType != 0,
                //     label: '问题分类'
                // },
                {
                    keyName: 'securityRisksName',
                    hidden: this.checkType != 1,
                    label: '安全隐患'
                },
                {
                    keyName: 'rectificationStatus',
                    label: '状态'
                },
                {
                    keyName: 'rectificationDescription',
                    span: 24,
                    label: '问题整改描述'
                },
                {
                    keyName: 'proDescription',
                    span: 24,
                    label: '问题描述'
                }
            ]
        },
        // 问题信息表单合并了检查信息的列表
        problemListCombine() {
            return [
              {
                keyName: 'subProjectName',
                label: '分项工程',
                span: 24,
              },
              // {
              //   keyName: 'dutyName',
              //   label: '责任人',
              //   span: 8,
              // },
              {
                keyName: 'respAreaName',
                label: '检查区域',
                span: 24,
              },
              {
                keyName: 'problemName',
                span: 24,
                label: '问题描述'
              },
              {
                keyName: 'problemSupply',
                span: 24,
                label: '技术问题补充'
              },

            ]
        },
      problemListCombine2() {
        return [
          {
            keyName: 'creatorUser',
            label: '检查人',
            span: 12,
          },
          {
            keyName: 'createTime',
            label: '检查时间',
            span: 12,
          },
          {
            keyName: 'fileArrays',
            type: 'uploadFile',
            label: '影像资料',
            // hidden: this.isTypeVideo,
            span: 24,
            businessCode: this.manageType == 1 ? 'SHE01' : 'QM01',
            attrs: {
              disabled: this.editModel == 0 || this.manageType == 1,
              uploadType: 'image',
              editModel: this.editModel,
              multiple: true,
              isUploadImgAndVideo:true,
            }
          },
        ]
      },
        // 整改基础信息
        rectification() {
        let that = this
          return [
            {
                keyName: 'rectifierName',
                label: '整改人'
            },
            {
                keyName: 'inspectedUnit',
                label: '整改单位'
            },
            {
                keyName: 'rectifyTerm',
                label: '整改期限'
            },
            {
                keyName: 'reCheckName',
                label: '复查人'
            },
            {
                keyName: 'isOvertime',
                label: '是否按时整改',
                customRender(e) {
                  return !e ? '是' : '否'
                }
            },
            {
                keyName: 'rectificationStatus',
                label: '状态'
            }
          ]
        },
        // 整改结果单列表
        problemRectificationList() {
            return  [
              {
                keyName: 'result',
                label: '整改结果',
              },
              {
                keyName: 'rectifyDate',
                label: '整改完成时间',
              },
              {
                keyName: 'description',
                label: '整改描述'
              },
              {
                keyName: 'fileArrays',
                type: 'uploadFile',
                label: '整改照片',
                span: 24,
                businessCode: this.manageType == 1 ? 'SHE01' : 'QM01',
                attrs: {
                  disabled: true,
                  uploadType: 'image',
                  editModel: this.editModel,
                }
              },
              {
                keyName: 'reviewDescription',
                label: '复查描述'
              }
            ]
        }
    },

    data() {
      //2021-11-15备注;
      //安全检查记录详情页面，不跳这个页画了
        return {
            manageType: '0', // 技术安全管理类型：0 检查记录；1 问题整改
            checkType: '0', // 检索类型：0 技术，1 安全
            editModel: '0', // 操作类型：0 查看；1 编辑
            userInfo: {}, // 用户信息
            checkLoading: false, // 搜索loading
            checkInfo: {}, //技术检查信息
            problemInfo: {}, //技术问题信息
            projectInfo: {
              branchCompanyName: "",
              projectName: "",
              rectifyResults: [],
              dataFile: [],
              status: ''
            }, //项目信息
            problemRectification: [], //技术问题整改结果
            loading: false, // loading控件
            rules: {
                rectificationDescription: [
                    { required: true, whitespace: true, message: '请输入整改描述', trigger: 'change', whitespace: true }
                ],
                rectificationResult: [{ required: true, message: '请选择整改结果', trigger: 'change' }]
            }, // 校验规则
            init: false, // 检索检查编号初始化
            api: null, // 请求api
            combine: this.$route.query.combine, // 是否将技术检查信息和技术问题信息合并为技术问题信息
            previewImage: [], // 打点图
            previewVisible: false, // 打点图弹窗控件
            isTypeVideo:false,  //是否是视频
            isTypeVideoArr:['.mp4','.MP4','.RM','.rmvb','.3gp','.avi','.flv','.f4v','.mpg','.vob','.dat','.wmv','.asf','.mkv','.dv','.mov','.ts','.webm','.MOV','.MPV','.3GP'], //支持的视频格式
            columRectifica:[
              {title: '检查类别',dataIndex: 'checkTypeName'},
              {title: '检查人',dataIndex: 'checkerName'},
              {title: '操作',key: 'action',fixed: 'right',width: 150,scopedSlots: { customRender: 'action' }}
            ],
            relations:[], //关联技术检查整改信息
        }
    },
    methods: {
        /**
         * 提交表单
         */
        handleSubmit() {
            // 校验整改信息
            if (this.problemRectification && this.problemRectification.length > 0) {
                for (let index in this.$refs.problemRectification) {
                    this.$refs.problemRectification[index].validate((valid) => {
                        if (valid) {
                            if (index == this.$refs.problemRectification.length - 1) {
                                let name = ['update', 'create'][this.editModel - 1]
                                this.api[name](that.form)
                                    .then((res) => {
                                        that.loading = false
                                        that.$message.success('提交成功！')
                                        that.$multiTab.close()
                                    })
                                    .catch((res) => {
                                        that.loading = false
                                        // that.$message.warning(res?.data?.message || '提交失败！')
                                    })
                            }
                        } else {
                            this.$message.warning("请填写完所有必填项信息")
                            return
                        }
                    })
                }
            }
        },
        //查看检查（问题）具体位置
        logBtn(){
          this.previewVisible = true;
        },
        /**
         * 初始化表单
         */
        initForm() {
            this.loading = true
          problemAppDetail({
                    id: this.id
                })
                .then((res) => {
                    this.loading = false
                    if( res.data.createTime) {
                      res.data.createTime = moment( res.data.createTime).format("YYYY-MM-DD")
                    }
                    this.projectInfo = res.data;
                    const obj = statusList.find(item=>item.id === res.data.status)
                    this.$set(this.projectInfo, 'rectificationStatus', obj.name)
                  this.projectInfo.rectifyResults.forEach((item, index)=>{
                    if(index ===0&&res.data.status == 4) {
                      item.result = '合格'
                    } else {
                      item.result = '不合格'
                    }
                  })
                  this.$forceUpdate()
                })
                .catch(() => {
                    this.loading = false
                })
        },
         // 关联技术检查信息查看
        lookDetail(record){
          this.checkInfo = {fileArrays:[]}
          this.relations = []
          this.problemInfo = {}
          // this.qualityInspectionRecord = true;
          // this.initForm(record.checkId);
          // checkId
          this.$router.push({
            name: 'newRecordInfo',
            query: {
              id: record?.checkId,
              qualityInspectionRecord:true
            }
          })
        },
    },
    props:{
      // 外置参数
      query: {
        type: Object,
        default: ()=> null
      },
      // 是否显示底部按钮
      showButton: {
        type: Boolean,
        default: ()=> true
      }
    },
    mounted() {
      this.userInfo = Vue.getAcloudProvider().getUserInfo()
      // 初始化
      this.initForm()
    }
}
</script>

<style lang="less" scoped>
  ::v-deep .ant-form-item {
    display: flex;
  }
// 用户想让缩略图大些，不想点预览，说白了就是懒
::v-deep .wrapper .UploadImgVideo .uploadImgVideo-list .list{
  width: 400px;
  height: 400px;
}
::v-deep .wrapper .UploadImgVideo .uploadImgVideo-list .list:hover .hover{
  line-height: 400px;
}
.log-btn{
  display: inline-block;
  padding: 1px 15px;
  background-color:#3089CA;
  border-radius: 3px;
  font-size: 12px;
  color: #fff;
  line-height: 24px;
  cursor: pointer;
}
</style>
